<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片（相册）展示设计Ⅳ</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<figure class="sample">
  <!-- 展示需要分3组图片，可自行调整 -->
  <img src="https://source.unsplash.com/jOyTeT946cw" alt="sample1" />
  <div class="title">
    <div>
      <h2>Budapest</h2>
      <h4>Hungary</h4>
    </div>
  </div>
  <figcaption>
    <!-- 此处文字随意写的 -->
    <p>Budapest is the capital of Hungary, the main political, commercial, transportation and economic center and the largest city of the country.</p>
  </figcaption>
  <a href="#"></a>
</figure>

<figure class="sample hover">
  <!-- 展示需要分3组图片，可自行调整 -->
  <img src="https://source.unsplash.com/5omwAMDxmkU" alt="sample2" />
  <div class="title">
    <div>
      <h2>Manhattan</h2>
      <h4>New York</h4>
    </div>
  </div>
  <figcaption>
    <!-- 此处文字随意写的 -->
    <p>Manhattan is the most densely populated and the smallest of the five administrative districts of New York City.</p>
  </figcaption>
  <a href="#"></a>
</figure>

<figure class="sample">
  <!-- 展示需要分3组图片，可自行调整 -->
  <img src="https://source.unsplash.com/AuVELY4PpcU" alt="sample3" />
  <div class="title">
    <div>
      <h2>NewCastle</h2>
      <h4>UK</h4>
    </div>
  </div>
  <figcaption>
    <!-- 此处文字随意写的 -->
    <p>Newcastle is a port city in the northeast of England and one of the eight core cities in England. Its full name is Newcastle upon Tyne.</p>
  </figcaption>
  <a href="#"></a>
</figure>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>